<template>
    <div class="wocaishizhendegenjiedian">
        <div class="sousuoswrap">
            <div class="sswraps">
                <div class="sswrap clearfix">
                    <h1 class="tuwraps fl clearfix">
                        <span class="mlogos">
                            <a href="">
                                <s></s>
                            </a>
                        </span>
                    </h1>
                    <div class="sswrap-r clearfix fl">
                        <div class="msearchwrap fl">
                            <form action="" class="clearfix sso">
                                    <input type="text" class="msearchs fl" name="msearchs" placeholder="搜索 天猫 商品/品牌/店铺" autocomplete="off" v-model="mv">
                                    <button class="msearchbtn fl" type="button" @click="msou">搜索</button>
                            </form>
                            <ul class="relkeytop">
                                <li><a href="">外套</a></li>
                                <li><a href="">风衣男</a></li>
                                <li><a href="">外套</a></li>
                                <li><a href="">风衣男</a></li>
                            </ul>
                        </div>
                        <div class="ggtu fr">
                            <img src="../assets/img/ys/ggtu.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="xsliebiao-wrap">
            <div class="sswraps">
                <div class="xsnavs-wrap">
                    <div class="xsnavs">
                        您是不是要找：<a href="" class="sousuoming">{{key}}</a>
                    </div>
                </div>
                <div class="zonghenav-wrap clearfix">
                    <div class="zonghe fl">
                        <a href="javascript:;" class="zonghepaixu zonghe-a" @click="zonghe($event)">综合排序</a>
                        <a href="javascript:;" class="xiaoliang zonghe-a" @click="chacha($event)">销量<i class="xiaoliang-is xiaoliang-i"></i></a>
                        <!-- <a href="" class="xinpings zonghe-a">新品<i class="xiaoliang-is xinping-i"></i></a> -->
                        <a href="javascript:;" class="shoucangs zonghe-a" @click="chacha($event)">收藏<i class="xiaoliang-is shoucang-i"></i></a>
                        <a href="javascript:;" class="jiages zonghe-as" @click="chachap($event)">价格<i class="price-up"></i><i class="price-down"></i></a>
                    </div>
                    <div class="price-chaxun">
                        <form action="">
                            <div class="pinput-wrap">
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="lowprice" maxlength="8" v-model="p1" autocomplete="off" @focus="xx">
                                </b>
                                <i class="jiange"></i>
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="highprice" maxlength="8" v-model="p2" autocomplete="off" @focus="xx">
                                </b>
                            </div>
                            <div class="qkqr">
                                <a href="javascript:;" class="cbtn" @click="qk">清空</a>
                                <a href="javascript:;" class="qrbtn" @click="qr">确定</a>
                            </div>
                        </form>
                    </div>
                </div>
                <router-view :zl="jgw" :chuanmv="nmv"></router-view>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        msou(){
            if(this.mv){
                this.key=this.mv
                this.nmv=this.mv
                this.$router.push({name:"sousuo",params:{cha:this.mv}})
            }else{
                return false
            }
           
        },
        zonghe(val){
            let zhwrap=document.getElementsByClassName('zonghe-a')
            let zhwraps=document.getElementsByClassName("zonghe-as")[0]
            for(var i=0;i<zhwrap.length;i++){
                 zhwrap[i].classList.remove('active')
                 if(zhwrap[i].innerText==val.toElement.innerText){
                     zhwraps.classList.remove('downp')
                     zhwraps.classList.remove('upp')
                     zhwraps.classList.remove('active')
                     zhwrap[i].classList.add('active')
                 }
             }
             this.jgw.zonghe=true
             this.jgw.up=false
             this.jgw.down=false
             this.jgw.moren=true
             this.jgw.jichu="",
             this.jgw.mup=""
             this.jgw.mdown=""
             this.p1=""
             this.p2=""
             this.n1=0
        },
        qr(){
            this.jgw.zonghe=false
             this.jgw.mup=this.p1
             this.jgw.mdown=this.p2
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         qk(){
             this.p1=""
             this.p2=""
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         sj(){
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         xx(){
            var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="block"
         },
         chacha(val){
             this.jgw.zonghe=false
             var _this=this
             let zhwrap=document.getElementsByClassName('zonghe-a')
             let zhwraps=document.getElementsByClassName("zonghe-as")[0]
             console.log(val.toElement.innerText)
             for(var i=0;i<zhwrap.length;i++){
                 zhwrap[i].classList.remove('active')
                 if(zhwrap[i].innerText==val.toElement.innerText){
                     _this.jgw.jichu=val.toElement.innerText
                     zhwraps.classList.remove('downp')
                     zhwraps.classList.remove('upp')
                     zhwraps.classList.remove('active')
                     _this.jgw.moren=true
                     _this.jgw.up=false
                     _this.jgw.down=false
                     _this.n1=0
                     zhwrap[i].classList.add('active')
                 }
             }

         },
         chachap(val){
             this.jgw.zonghe=false
            let zhwrap=document.getElementsByClassName('zonghe-a')
            let zhwraps=document.getElementsByClassName("zonghe-as")[0]
             var _this=this
             _this.jgw.jichu=""
             for(var i=0;i<zhwrap.length;i++){
                zhwrap[i].classList.remove('active')
             }
             if(val.toElement.innerText=="价格"){
                 this.n1++
                 if(this.n1==3){
                     this.n1=0
                 }
             }
             if(val.toElement.innerText=="价格"){
                         if(_this.n1==1){
                             zhwraps.classList.add('upp')
                             zhwraps.classList.add('active')
                             _this.jgw.moren=false
                             _this.jgw.up=true
                         }else if(_this.n1==2){
                             zhwraps.classList.remove('upp')
                             zhwraps.classList.add('downp')
                             _this.jgw.up=false
                             _this.jgw.down=true
                         }else{
                             if(zhwraps.className.indexOf('downp')>-1){
                                 zhwraps.classList.remove('downp')
                                 zhwraps.classList.remove('active')
                                 _this.jgw.moren=true
                                 _this.jgw.down=false
                             }else{
                                 zhwraps.classList.add('active')
                             }
                         }
                     }
         },
    },
    data(){
        return {
            key:"",
             n1:0,
             jgw:{
                 zonghe:false,
                 up:false,
                 down:false,
                 moren:true,
                 jichu:"",
                 mup:"",
                 mdown:""
             },
             p1:"",
             p2:'',
             mv:"",
             nmv:""
        }
    },
    created(){
        console.log(this.$route)
        if(this.$route.params.cha){
            this.key=this.$route.params.cha
        }else{
            this.key=this.$route.query.a
        }

    }
}
</script>

<style scoped>
.upp .price-up{
    border-bottom-color: #B10000
}
.downp .price-down{
    border-top-color: #B10000
}
.sso{
    position: relative;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.fr{
    float: right;
}
.fl{
    float: left;
}
    *{
        box-sizing: content-box;
    }
    .sswraps{
        width: 1190px;
        margin: 0 auto;
    }
    .tuwraps{
        width: 280px;
        padding-top: 20px;
        height: 64px;
        line-height: 64px;
        position: relative;   
    }
    .mlogos{
        float: left;
        margin-right: 10px;
        padding: 0;
    }
    .mlogos a{
        height: 30px;
        width: 190px;
        overflow: hidden;
        position: relative;
        display: block;
        color: #fff;
    }
    .mlogos a s{
        width: 190px;
        height: 28px;
        background: url("../assets/img/ys/mlogos1.png") no-repeat;
        position: absolute;
        display: block;
        top: 0;
        cursor: pointer;
    }
    .ggtu{
        margin-top: 20px;
        width: 190px;
        height: 80px;
    }
    .ggtu img{
        width: 100%;
        height: 100%;
    }
    .msearchwrap{
        width: 597px;
        padding-top: 25px;
        overflow: hidden;
    }
    .msearchwrap form{
        border: solid #FF0036;
        border-width: 3px 0 3px 3px;
    }
    .mwraps1{
        background: #fff;
        height: 30px;
        position: relative;
    }
    .msearchs{
        padding-left: 5px;
        outline: none;
        border: none;
        width: 504px;
        height: 35px;
        text-indent: 5px;
        font-size: 14px;
        color: #666;
    }
    .msearchbtn{
        font-size: 16px;
        cursor: pointer;
        border: none;
        top:0px;
        right: 0;
        position: absolute;
        width: 90px;
        background-color: #FF0036;
        height: 35px;
        color: #fff;
        line-height: 30px;
        text-align: center;
    }
    .sswrap-r{
        width: 910px;
    }
    .relkeytop{
        margin-top: 0;
        padding: 4px 0 0;
        margin-left: -13px;
        height: 16px;
        overflow: hidden;
        width: 100%;
    }
    .relkeytop li{
        float: left;
        border-left: 1px solid #ccc;
        line-height: 16px;
        padding: 0 12px;
    }
    .relkeytop li a{
        color: #999;
        font-size: 13px;
    }
    .relkeytop li a:hover{
        color: #FF0036;
    }
    .xsnavs{
        margin-top: 10px;
        height: 32px;
        line-height: 32px;
        color: #b0a59f;
        background-color: #fffae0;
        padding-left: 32px;
        font-size: 12px;
    }
    .sosuoming{
        color: #806f66;
    }
    .sswraps{
        border-bottom: 1px solid #E5E5E5;
    }
    .zonghenav-wrap{
        margin-top: 20px;
        background: #faf9f9;
        color: #806f66;
        padding: 5px;
        margin-bottom: 10px;
    }
    .zonghe{
        border: 1px solid #CCCCCC;
        height: 24px;
        line-height: 24px;
        box-sizing: content-box;
    }
    .zonghe-a{
        padding: 0 15px 0 5px;
        color: #806f66;
        display: inline-block;
        border-right: 1px solid #ccc;
        font-size: 12px;
        color: #806f66;
        position: relative;
    }
    .zonghe-as{
        padding: 0 15px 0 5px;
        color: #806f66;
        display: inline-block;
        border-right: 1px solid #ccc;
        font-size: 12px;
        color: #806f66;
        position: relative;
    }
    .zonghe .active{
        color: #B10000;
    }
    .zonghe .active .xiaoliang-is{
        background-position: -30px -23px;
    }
    .zonghe-a:hover{
        color: #B10000;
    }
    /* .zonghe-a:last-child{
        border-right: none;
    } */
    .xiaoliang-is{
        position: absolute;
        top: 8px;
        right: 5px;
        width: 7px;
        height: 10px;
        line-height: 10px;
        display: inline-block;
        overflow: hidden;
        background: url("../assets/img/ys/10.png") no-repeat 9999px 9999px;
        background-position: -22px -23px;
    }
    .xiaoliang:hover .xiaoliang-i{
        background-position: -30px -23px;
    }
    .xinpings:hover .xinping-i{
        background-position: -30px -23px;
    }
    .shoucangs:hover .shoucang-i{
        background-position: -30px -23px;
    }
    .price-up{
        position: absolute;
        display: inline-block;
        line-height: 10px;
        right: 5px;
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-bottom: 4px solid #806F66;
        top: 3px;
    }
    .price-down{
        position: absolute;
        display: inline-block;
        line-height: 10px;
        right: 5px;
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-top: 4px solid #806F66;
        top: 13px;
    }
    .price-chaxun{
        float: left;
        margin-left: 20px;
        position: relative;
    }
    .fb-item{
        position: relative;
        font-weight: 400;
    }
    .pricei{
        width: 12px;
        height: 22px;
        line-height: 22px;
        left: 4px;
        top: 2px;
        position: absolute;
        display: inline-block;
        color: #666;
        font-size: 12px;
        font-style: normal;
        font-family: arial,verdana,sans-serif!important;
    }
    .jginput{
        display: block;
        float: left;
        width: 45px;
        height: 22px;
        line-height: 22px;
        text-indent: 12px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    .jiange{
        position: static;
        background: url("../assets/img/ys/10.png") no-repeat 9999px 9999px;
        background-position: -78px -106px;
        display: block;
        float: left;
        width: 8px;
        height: 24px;
        line-height: 24px;
    }
    .qkqr{
        display: none;
        width: 102px;
        height: 24px;
        padding: 5px;
        text-align: center;
        position: absolute;
        top: 29px;
        left: 0;
        /* background-color: #EFECEB; */
        z-index: 2;
    }
    .cbtn{
        margin-right: 3px;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0 10px;
        background-color: #EFECEB;
        border: 1px solid #ccc;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        font-family: \5b8b\4f53;
        border-radius: 2px;
        color: #333;
    }
    .qrbtn{
        margin-right: 3px;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 0 10px;
        background-color: #950b00;
        /* border: 1px solid #ccc; */
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        font-family: \5b8b\4f53;
        border-radius: 2px;
        color: #fff;
    }
</style>

